<!--
 * @Author: your name
 * @Date: 2020-01-05 13:18:27
 * @LastEditTime : 2020-01-06 13:09:51
 * @LastEditors  : Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \topologyproject\src\components\topologyDisplay\model\cusAttribute.vue
 -->
<template>
    <div>
        <div v-for="(item,key) in customAttribute" :key="key" style="text-align:left;margin:4px 0px">
            <Input placeholder="请输入属性名" v-if="item.type === 'default'" disabled style="width: 220px" v-model="item.txt" clearable @on-change="ss"></Input>
            <Input placeholder="请输入属性名" v-else :disabled="item.type === 'default'" style="width: 220px" v-model="item.key" clearable @on-change="ss"></Input>
            <Icon type="md-remove" />
            <Input placeholder="请输入属性值" :disabled="item.type === 'default'" style="width: 220px" v-model="item.value" clearable  @on-change="ss"></Input>
            <Icon type="md-remove-circle" v-if="item.type !== 'default'" @click="removeMetadata(key)" :size="20" style="cursor:pointer"/>
            <Checkbox v-model="item.checked" v-if="item.type === 'default'"></Checkbox>
        </div>
        <div style="margin-left:">
            <Button icon="ios-add" type="dashed" size="large" @click="handleAddMetadata" :style="{'margin-top':customAttribute.length > 0 ? '10px':''}">添加</Button>
        </div>
    </div>
</template>


<script>
export default {
    name:'cusAttri',
    data(){
        return{
            customAttribute:[
                {
                    key:null,
                    value:null
                },
            ],
        }
    },
    props:['msgVal'],
    created(){
        console.log(this.msgVal)
        this.customAttribute = this.msgVal
        // if(this.magVal.length!=0){
            
        // }
    },
    mounted(){

    },
    methods:{
        handleAddMetadata(){
            this.customAttribute.push({
                key:'',
                value:'',
            })
            this.$emit('func',this.customAttribute)
        },
        removeMetadata(index){
            this.customAttribute.splice(index,1)
            this.$emit('func',this.customAttribute)
        },
        ss(){
            this.$emit('func',this.customAttribute)
        }
    },
    // computed(){
    //     // onsole.log(this.msgVal)
    //     // if(this.magVal.length!=0){
    //     //     
    //     // }
    //     this.customAttribute = this.msgVal
    // },
    watch:{
        // msgVal:(val1,val2)=>{
        //     // console.log(val1)
        //     // console.log(val2)
        //     this.customAttribute = val1;
        // },
        msgVal: {
            handler(newVal, oldVal) {
                this.customAttribute = newVal;
            },
            deep: true
        }
    }
}
</script>

<style scoped>

</style>